/*
  学习目标：useEffect使用第二个参数，模拟生命周期
  第二个参数作用：如果传递了第二个参数，也就依赖项， [ 依赖项1，依赖项2 ...]
  那么在依赖项改变时，才会触发 useEffect，类似 vue - watch
    需求1： 模拟挂载时
    需求2： 模拟更新时

*/
import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello react');
  // ❌ 实际工作中不推荐，不传第二个参数，那么组件上所有 的状态改变，都会引起更新
  // useEffect(() => {
  //   console.log('useEffect被触发了 -----> ');
  //   document.title = count;
  // });

  // 假如参数为空数组，也就是不监听任何状态，页面的 状态 改变了，都不会影响到我
  // 所以，我只在 页面渲染完成时 执行一遍，等价于 componentDidMount
  // useEffect(() => {
  //   console.log('useEffect被触发了 -----> ');
  //   document.title = count;
  // }, []);

  // 加入了依赖，那么依赖 count 变化时，也就是页面更新时，都会触发 useEffect
  // 所以，它在 页面挂载完成和更新时，会执行，等价于 componentDidMount 和 componentDidUpdate 二合一
  useEffect(() => {
    console.log('useEffect被触发了 -----> ');
    document.title = count;
  }, [count]);

  return (
    <div>
      count - {count} msg - {msg}
      <button onClick={() => setCount(count + 1)}>
        点我修改count-并且同步到 document.title
      </button>
      <button onClick={() => setMsg(msg + '~')}>点我修改msg</button>
    </div>
  );
}
